{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
	<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

	  <el-form-item label="权限等级" prop="pid">
	    <el-cascader 
	    	v-model="pid"
	    	placeholder="试试搜索：权限"
	    	filterable
	    	clearable
			:props="defaultProps"
	    	:options="auth"
	     	:show-all-levels="false">
	    </el-cascader>
	  </el-form-item>

	  <el-form-item label="只是菜单栏" prop="is_nav">
	    <el-radio-group v-model="form.is_nav">
	      <el-radio :label="1">是</el-radio>
	      <el-radio :label="0">否[默认]</el-radio>
	    </el-radio-group>
	    <div class="text-muted mt-2 small" v-show="form.is_nav">
	      <p class="mb-0">是：不带url或其他事件，只是作为折叠菜单栏分类使用</p>
	    </div>
	  </el-form-item>

	  <el-form-item label="请求方式" v-show="!form.is_nav" prop="resource">
	    <el-radio-group v-model="form.method">
	      <el-radio :label="'rule'">Rule</el-radio>
	      <el-radio :label="'any'">All</el-radio>
	      <el-radio :label="'post'">Post</el-radio>
	      <el-radio :label="'get'">Get</el-radio>
	      <el-radio :label="'patch'">Patch</el-radio>
	      <el-radio :label="'delete'">Delete</el-radio>
	      <el-radio :label="'put'">Put</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="权限名称" prop="title">
	    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title"></el-input>
	  </el-form-item>

	  <el-form-item label="别名">
	    <el-input v-model="form.alias" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Alias"></el-input>
	  </el-form-item>

	  <el-form-item label="控制器" v-show="!form.is_nav" :prop="form.is_nav?'':'controller'">
	    <el-input v-model="form.controller" class="col-12 col-sm-2 pl-0 pr-0" placeholder="Controller"></el-input>
	  </el-form-item>

	  <el-form-item label="操作" v-show="!form.is_nav" :prop="form.is_nav?'':'fun'">
	    <el-input v-model="form.fun" class="col-12 col-sm-2 pl-0 pr-0" placeholder="Action"></el-input>
	  </el-form-item>

	  <el-form-item label="路由/Url" v-show="!form.is_nav" :prop="form.is_nav?'':'url'">
	    <el-input v-model="form.url" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Url"></el-input>
	    <small class="text-muted mt-2 d-block">
	      <p class="mb-0">路由即网址“/”后的参数:{:config('web.url')}/home,则填入“home”</p>
	    </small>
	  </el-form-item>

	  <el-form-item label="参数/Param" v-show="!form.is_nav" prop="param">
	    <el-input v-model="form.param" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Param"></el-input>
	    <small class="text-muted mt-2 d-block">
      		<p class="mb-0">例：“/:param/:param1/[:param2]”</p>
	    </small>
	  </el-form-item>

	  <el-form-item label="状态" prop="status">
	    <el-radio-group v-model="form.status">
	      <el-radio :label="1">启用[默认]</el-radio>
	      <el-radio :label="0">禁用</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="菜单栏" prop="show">
	    <el-radio-group v-model="form.show">
	      <el-radio :label="1">显示</el-radio>
	      <el-radio :label="0">隐藏[默认]</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="排序" prop="sort">
	    <el-input v-model="form.sort" class="col-12 col-sm-2 pl-0 pr-0" placeholder="Sort"></el-input>
	  </el-form-item>

	  <el-form-item label="图标" prop="icon">
	    <el-input v-model="form.icon" class="col-12 col-sm-2 pl-0 pr-0" placeholder="Icon"></el-input>
	  	<small class="text-muted mt-2 d-block">
	  		<p class="mb-0">Code: &lt;i class=&quot;el-icon-eleme&quot;&gt;&lt;/i&gt;<a href="https://element.eleme.cn/#/zh-CN/component/icon" class="link ml-1" target="_blank">Icon</a></p>
	  		<p class="mb-0">Img: &lt;img  class=&quot;el-icon&quot; src=&quot;img.png&quot;&gt;</p>
	  	</small>
	  </el-form-item>

	  <el-form-item>
	    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
	    <el-button @click="resetForm('form')">重置</el-button>
	  </el-form-item>
		<el-form-item label="Code" v-show="!form.is_nav" :prop="form.is_nav?'':'code'">
		    <el-input type="textarea" :autosize="{ minRows: 3}" v-model="form.code" class="col-12 col-sm-6 pl-0 pr-0"></el-input>
			<p class="text-danger">注意：此项为开发人员使用，非开发人员慎用</p>
		</el-form-item>
	</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="auth"}
	var authCate=[];
	{else/}
	var authCate={:json_encode($auth,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var url='/addAuth';
	var is_edit=false;
	var pid=[];
	var formData={
				pid:0,
				method:'rule',
				alias:'',
				title:'',
				controller:'',
				fun:'',
				url:'',
				param:'',
				status:1,
				is_nav:0,
				show:0,
				sort:99,
				icon:'',
				code:'',
			};
	{else/}
	var url='/editAuth/{$Find.aid}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	var pid=[];
	if (formData.ppid) {
		pid.push(formData.ppid,formData.pid);
	}else if(formData.pid){
		pid.push(formData.pid);
	}
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			auth: authCate,
			labelPosition:'right',
			form:formData,
			is_edit:is_edit,
			pid:pid,
	        defaultProps: {
	          	value: 'aid',
	          	label: 'title',
	          	children: 'data',
	          	checkStrictly:true
	        },
	        rules: {
	          pid: [
	            { required: true, message: '请选择权限等级', trigger: 'change' }
	          ],
	          title: [
	            { required: true, message: '请输入权限名称', trigger: 'blur' },
	            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
	          ],
	          controller: [
	            { required: true, message: '请输入控制器', trigger: 'blur' },
	          ],
	          fun: [
	            { required: true, message: '请输入操作', trigger: 'blur' },
	          ],
	          url: [
	            { required: true, message: '请输入路由', trigger: 'blur' },
	          ],
	          sort: [
	            { required: true, message: '请输入排序', trigger: 'blur' },
	          ],
	          status: [
	            { required: true, message: '请选择状态', trigger: 'change' }
	          ],
	          is_nav: [
	            { required: true, message: '请选择状态', trigger: 'change' }
	          ],
	          show: [
	            { required: true, message: '请选择是否为菜单', trigger: 'change' }
	          ],
	          code: [
	            { required: true, message: '请勿随意更改Code', trigger: 'blur' }
	          ]
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		    pid(val,oldVal){
				if (val.length>0) {
				this.form.pid=val[val.length-1];
				}else{
				this.form.pid=0;
				}
		    },
			newValue(val, oldVal){
	        	this.form.code='Route::'+val.method+'(\''+val.url+val.param+'\',\'{:app('http')->getName()}/'+val.controller+'/'+val.fun+'\');';
			},
		},
	    computed: {
	    	newValue() {
	    		var _this=this;
	    		var newObj={
	    			method:_this.form.method,
	    			module:_this.form.module,
	    			controller:_this.form.controller,
	    			fun:_this.form.fun,
	    			url:_this.form.url,
	    			param:_this.form.param,
	    		};
	    		return newObj;
	    	}, 
	    },
		created(){
			XYBase.created(this);
		},
		methods:{
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit){
										_this.resetForm(formName);
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.pid=pid;
				this.form.code='';
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}